<template>
	<view class="box">
		<view class="topBox">
			<view class="flex align-center">
				<view class="search">
					<uni-search-bar bgColor="#F6F6F6" radius="34" placeholder="请输入搜索内容" clearButton="auto" cancelButton="none"
						inputBorder="false" />
				</view>
				<view class="button flex" @click="click_sift">
					<view class="text">筛选</view>
					<image class="image" :class="{trueImage:sift_animation}" src="../../static/store/筛选.png"></image>
				</view>
			</view>
			<view class="list" :class="{trueList:sift_animation}">
				<view class="text">list</view>
				<view class="text">list</view>
				<view class="text">list</view>
				<view class="text">list</view>
			</view>
			<view class="tab_view flex justify-between align-center">
				<view class="tab_item " v-for="(item,index) in tabAll" :key="item.type" :class="index==tabIndex?'alive':''"
					@click="tabClick(item,index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="cnenterBox">
			<view class="cnenter_box" v-for="(item,index) in data.list" :key="index">
				<div class="cnenter_box_item">
					<view class="title_box flex align-center justify-between">
						<view class="flex align-center">
							<image src="@/static/images/orderIcon.png" mode=""></image>
							<view class="title">
								{{item.store_name}}
							</view>
							<image src="@/static/store/筛选.png" mode="aspectFill"></image>
						</view>
						<view class="state">
							已完成
						</view>
					</view>
					<view class="orderInformation_box flex">
						<image class="image" :src="item.store_avatar" mode=""></image>
						<view class="orderInformation">
							<view v-if="item.order_status==2">待使用</view>
							<view v-if="item.order_status==3">进行中</view>
							<view v-if="item.order_status==4">已结束</view>
							<view>{{item.begin_time}}</view>
							<view>{{item.actual_payment}}</view>
							<view>{{item.end_time}}</view>
						</view>
					</view>
					<view class="orderInformation_button flex align-center justify-end">
						<view class="button">删除</view>
						<view class="button">再来一单</view>
					</view>
				</div>
			</view>
			<view class="cnenter_view flex flex-direction align-center" v-if="false">
				<image src="@/static/images/noData.png" mode="aspectFill"></image>
				<view class="cnenter_view_title">
					暂无订单~
				</view>
				<view class="cnenter_view_button flex justify-center align-center">
					去开台
				</view>
			</view>

		</scroll-view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref,
		getCurrentInstance,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()
	let data = reactive({
		userIfon: {},
		list: [],
		order_status: null
	})
	let winHeight = ref(uni.getSystemInfoSync().windowHeight)
	let tabIndex = ref(0)
	let tabAll = reactive([{
		title: '全部',
		type: null,
	}, {
		title: '进行中',
		type: 3,
	}, {
		title: '待开始',
		type: 2,
	}, {
		title: '已结束',
		type: 4,
	}])
	let list = reactive([{
		title: "黑游台球-济南万达广场",
		status: 0,
		type: "立即开台(2小时)2号桌",
		orderTime: "2044-08-18  13:20-16:33",
		money: "38",
		placeTime: '2044-08-18  13:20-16:33'
	}, {
		title: "黑游台球-济南万达广场",
		status: 0,
		type: "立即开台(2小时)2号桌",
		orderTime: "2044-08-18  13:20-16:33",
		money: "38",
		placeTime: '2044-08-18  13:20-16:33'
	}, {
		title: "黑游台球-济南万达广场",
		status: 0,
		type: "立即开台(2小时)2号桌",
		orderTime: "2044-08-18  13:20-16:33",
		money: "38",
		placeTime: '2044-08-18  13:20-16:33'
	}, ])
	const sift_animation = ref(false)
	const click_sift = () => {
		sift_animation.value = !sift_animation.value
	}
	const tabClick = (item, index) => {
		data.order_status = item.type
		tabIndex.value = index
		getList()
	}

	function getList() {
		let obj = {
			user_id: data.userIfon.user_id,
			order_status: data.order_status
		}
		console.log(obj, 'order_status')
		if (!obj.order_status) {
			delete obj.order_status
		}
		proxy.$https('/get_order_message_api', obj).then(res => {
			data.list = res
		})
	}
	onShow(() => {
		data.userIfon = getApp().globalData.userIfon
		getList()
	})
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.box {
		height: 100vh;
	}

	.list {
		position: absolute;
		right: 32rpx;
		top: -200rpx;
		width: 100rpx;
		opacity: 0;
		// background: #ccc;
		transition: none;
		z-index: 1;

		.text {
			width: 90rpx;
			margin-top: 10rpx;
			height: 50rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
			transition: all 1s
		}

	}

	.trueList {
		animation: trueListAnimation 1s forwards;
	}

	.topBox {
		padding: 0 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.search {
			width: 574rpx;
		}

		.button {
			display: flex;
			margin-left: 20rpx;

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.image {
				height: 28rpx;
				width: 28rpx;
				margin-left: 8rpx;
				transition: all 1s;
				transform: rotate(0deg);
			}

			.trueImage {
				transform: rotate(180deg);
			}
		}
	}

	.tab_view {
		margin-top: 32rpx;
		margin-bottom: 12rpx;

		.tab_item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.tab_item.alive {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -10rpx;
				width: 100%;
				height: 8rpx;
				background: linear-gradient(90deg, rgba(16, 199, 110, 0.6) 0%, rgba(16, 199, 110, 0.1) 100%);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(16, 199, 110, 0.1);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}
	}

	.cnenterBox {
		height: calc(100% - 91px);

		.cnenter_view {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 532rpx;
				height: 394rpx;
			}

			.cnenter_view_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
			}

			.cnenter_view_button {
				margin-top: 32rpx;
				width: 260rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #10C76E;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #10C76E;
			}

		}

		.cnenter_box {
			padding: 0 32rpx;

			.cnenter_box_item {
				padding: 24rpx;
				margin-top: 20rpx;
				// height: 344rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.title_box {
					image:first-child {
						width: 40rpx;
						height: 40rpx;
					}

					image:last-child {
						width: 24rpx;
						height: 24rpx;
						transform: rotate(270deg);
						margin-left: 8px;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						margin-left: 8px;
					}

					.state {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #EE5618;
					}
				}

				.orderInformation_box {
					margin-top: 20rpx;

					.image {
						width: 160rpx;
						height: 160rpx;
						background-color: #999999;
					}

					.orderInformation {
						margin-left: 20rpx;

						view {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 8rpx;
						}
					}
				}

				.orderInformation_button {
					margin-top: 32rpx;

					.button:first-child {
						width: 86rpx;
						height: 44rpx;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						border: 1rpx solid #999999;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.button:last-child {
						width: 140rpx;
						height: 44rpx;
						padding: 8rpx 20rpx;
						border-radius: 22rpx 22rpx 22rpx 22rpx;
						border: 1rpx solid #EE5618;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 22rpx;
						color: #EE5618;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}
			}

		}
	}

	@keyframes trueListAnimation {
		0% {
			top: -200rpx;
			opacity: 0;
		}

		50% {
			top: 80rpx;
			opacity: 0;
		}

		100% {
			top: 80rpx;
			opacity: 1;
		}
	}
</style>